<template>
  <div class="cloumnHide">
    <div class="filterTableBox">
      <el-table :data="filterTableData" height="calc(100% - 14px)">
        <el-table-column
          v-for="item in filterTableColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row[item.prop]"
              v-if="item.prop != 'label'"
              @change="checkboxChange($event, scope.$index, item.prop)"
            />
            <span v-else>{{ scope.row.label }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingleTableCloumn',
  data() {
    return {}
  },
  props: {
    filterTableData: Array,
    filterTableColumn: Array,
    checkboxChange: Function,
  },
  components: {},
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss">
.cloumnHide {
  width: 100%;
  height: 100%;
  padding: 8px;
  .filterTableBox {
    margin-top: 10px;
    overflow: auto;
  }
}
</style>
